<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" th:href="@{/static/favicon2.ico}" >
	<title>取号系统</title>
	<!-- Bootstrap -->
	<link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
	<style type="text/css">
		th {
			text-align: center;
		}
		td {
			text-align: center;
		}
	</style>
	<!--<script src="https://lib.baomitu.com/echarts/4.7.0/echarts.js"></script>-->
	<script th:src="@{/static/js/echarts.js}"></script>

</head>
<body>
	<div class="jumbotron">
		<a th:if="${isfirst} eq '2' " role="button" class="btn btn-default" style="position: relative; left: 10%;" href="/machine/index" >
			<span class="glyphicon glyphicon-home"></span> Home
		</a>
		<label th:if="${username} ne '' " style="position: absolute; left: 90%;">欢迎您，<span th:text="${username}"></span></label>
  		<div class="container" align="center">
      		<h2 class="text-info" style="font-family:宋体;font-weight:bold;font-size:49px">编号：<span th:text="${noid}"></span></h2>
      		<p>
      		<a th:if="${isfirst} eq '1' " role="button" id="a_btn" href="/machine/getNum" class="btn btn-success btn-lg">取号</a>
      		<a th:if="${isfirst} eq '2' " role="button" id="a_btn" href="/machine/getNum" class="btn btn-success btn-lg disabled">取号</a>
      		</p>
      		<div class="text-muted">生活不仅有苟且，还有诗和远方！</div>
      		<table class="table table-striped table-hover table-bordered">
	      		<thead>    
		            <tr>
		                <th>编号</th>  
		                <th>用户</th>
		                <th>生成时间</th>
		            </tr>
	        	</thead>
	        	<tbody>
		        	 <tr th:each="machineNum : ${machineNums}">
			            <td th:text="${machineNum.todayid}"></td>
			            <td th:text="${machineNum.name}"></td>
			            <td th:text="${#dates.format(machineNum.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
			         </tr>
		        </tbody>
      		</table>
      		 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	    	<div id="main" style="width: 600px;height:400px;">
	    		
	    	</div>
  		</div>
	</div>
	
	
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script th:src="@{/static/js/jquery.min.js}"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script th:src="@{/static/js/bootstrap.min.js}"></script>
    <script type="text/javascript">
    var xData = [];
    var yData = [];
    var yUserData = [];
    var serriesData = [];
    var legendData = ['总数'];
	</script>
	<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '每日数量统计'
            },
            tooltip: {},
            legend: {
                data:legendData
            },
            xAxis: {
                data: xData
            },
            yAxis: {},
            series: serriesData
        };
        function a_func() {
    		$.ajax({
    		    url: "/machine/mapData",
    		    data: {qulify: 'true'},
    		    type: "GET",
    		    dataType: "json",
    		    success: function(data) {
    		    	var total = data.total;
    		        if (total) {
    		        	for (var i = total.length - 1; i>=0;i--){
    		        		xData.push(total[i].dateStr);
    		        		yData.push(total[i].todayid);
    		        	}
    		        	var totalD = {};
    		        	totalD.name = "总数";
    		        	totalD.type = 'bar';
    		        	totalD.data = yData;
    		        	serriesData.push(totalD);
    		        	// 分用户push数据 
    		        	for (var j =0;j < data.userInfo.total; j++) {
    		        		var userinf = {};
    		        		legendData.push(data.userInfo.username[j].userName);
    		        		userinf.name = data.userInfo.username[j].userName;
    		        		userinf.type = 'bar';
    		        		userinf.stack = '用户';
    		        		var userdetaildata = [];
    		        		for (let key in data.details) {
    		        			var dayArrWithUserInfo = data.details[key];
    		        			for (var dd = 0; dd < dayArrWithUserInfo.length; dd ++) {
    		        				if (dayArrWithUserInfo[dd].name == data.userInfo.username[j].userName) {
    		        					userdetaildata.push(dayArrWithUserInfo[dd].count);
    		        				}
    		        			}
    		        		}
    		        		userdetaildata.reverse();
    		        		userinf.data = userdetaildata;
    		        		serriesData.push(userinf);
    		        	}
    		        	 // 使用刚指定的配置项和数据显示图表。
    		            myChart.setOption(option);
    		        }
    		    }
    		});
    	};
    	a_func();
    </script>
</body>
</html>